<template>
  <view class="doctor" @click="toWebView('#/unauth/doctorList','专家名医')">
    <view class="content">
      <view class="title">
        <view class="f34">{{ newData.title }}</view>
        <view>
          <text class="f28 text-gray">更多</text>
          <text class="cuIcon-right f28 text-gray"></text>
        </view>
      </view>
      <view class="info mt32">
        <view class="tips f24"> 沟通{{ newData.count }}次 </view>
        <view class="flex">
          <view class="img-box">
            <image :src="newData.handImg" mode="scaleToFill" />
          </view>
          <view class="doctor-info ml16">
            <view class="f28">{{ newData.name }}</view>
            <view class="mt12 f24">{{ newData.zhiwei }}</view>
            <view class="mt12 f24">{{ newData.yiyuan }}</view>
            <view class="mt12 f24 text-gray">简介:{{ newData.jianjie }}</view>
            <view class="year mt20 f24">已为您服务:{{ newData.year }}年</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
const app = getApp();
export default {
  props: {
    value: {
      type: Object,
      default: function () {
        return {
          background: ``,
          themeColor: ``
        };
      },
    },
  },
  data() {
    return {
      newData: this.value,
	  WebViewUrl:app.globalData.WebViewUrl
    };
  },
  methods:{
	  toWebView(url,title){
			uni.navigateTo({
				url: '/pages/public/webview/webview?webUrl='+encodeURIComponent(this.WebViewUrl+url)+'&title='+title,
			});
		}
  }
};
</script>
<style lang="scss" scoped>
.doctor {
  margin: 20rpx;
  border-radius: 16rpx;
  background-color: #fff;
  padding: 32rpx;
}
.title {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.info {
  background-color: #63d0d130;
  padding: 32rpx;
  border-radius: 16rpx;
  position: relative;
  overflow: hidden;
  .tips {
    position: absolute;
    right: -18rpx;
    top: -18rpx;
    padding: 30rpx 42rpx 12rpx 24rpx;
    border-radius: 20rpx;
    background-color: #63d0d1;
    color: #fff;
  }
  .img-box {
    width: 80rpx;
    height: 80rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .doctor-info {
    flex: 1;
    color: #333;
    .year {
      color: #f68b61;
    }
  }
}
</style>
